<template>
  <section 
    id="contact-cards" 
    class="py-24 md:py-32"
    :style="{
      backgroundColor: bgColor
    }"
  >
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 标题区域 -->
      <div class="text-center max-w-3xl mx-auto mb-16">
        <span class="font-medium" :style="{ color: primaryColor }">联系信息</span>
        <h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mt-2 mb-4 text-gray-800">多种方式联系我们</h2>
        <p class="text-lg text-gray-600 leading-relaxed">无论您有任何需求，我们都能快速响应并提供专业支持</p>
      </div>
      
      <!-- 加载状态 -->
      <div v-if="isLoading" class="flex flex-col items-center justify-center py-16 bg-white rounded-xl shadow-sm max-w-5xl mx-auto">
        <div class="w-12 h-12 border-4 border-gray-200 border-t-primary rounded-full animate-spin mb-4" :style="{ borderTopColor: primaryColor }"></div>
        <p class="text-gray-600">正在加载联系信息...</p>
      </div>

      <!-- 联系卡片网格 -->
      <div v-else :class="gridClass">
        <div 
          v-for="(contact, index) in contacts" 
          :key="index" 
          class="bg-gray-50 rounded-xl p-6 text-center transition-all duration-300 hover:translate-y-[-5px] hover:shadow-xl cursor-pointer"
          :style="{ borderRadius: `${cardRadius}px` }"
          @click="handleCardClick(contact)"
        >
          <div 
            class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"
            :style="getContactIconBgStyle(contact)"
          >
            <i :class="['fa', contact.icon, 'text-2xl']" :style="{ color: primaryColor }"></i>
          </div>
          <h3 class="text-xl font-bold mb-3 text-gray-800">{{ contact.title }}</h3>
          <p class="text-gray-700 mb-4" v-html="contact.description"></p>
          
          <a 
            :href="contact.link" 
            class="font-medium hover:underline"
            :class="{ 'text-lg': contact.highlightLink }"
            :style="{ color: primaryColor }"
            @click.stop="handleLinkClick(contact, $event)"
          >
            {{ contact.linkText }}
          </a>
        </div>
      </div>

      <!-- 刷新按钮（仅在非静态数据源时显示） -->
      <div v-if="dataSourceType !== 'static' && dataSourceUrl && !isLoading" class="flex justify-end mt-8 max-w-5xl mx-auto">
        <button 
          @click="refresh" 
          :style="{ backgroundColor: primaryColor }"
          class="px-4 py-2 text-white rounded-lg hover:opacity-90 transition-all duration-300 flex items-center"
          :disabled="isLoading">
          <i class="fa fa-refresh mr-2"></i>
          刷新联系信息
        </button>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'ContactCards',
  // 低代码平台元数据
  lowcode: {
    meta: {
      name: 'contact-cards',
      displayName: '联系信息卡片',
      description: '展示多种联系方式的卡片组件，包括电话、在线客服、邮件和地址等',
      icon: 'fa-phone',
      category: '联系组件',
      version: '1.0.0',
      isContainer: false
    },
    
    configPanel: [
      {
        title: '基本配置',
        fields: [
          {
            name: 'primaryColor',
            label: '主题色',
            type: 'color',
            defaultValue: '#165DFF'
          },
          {
            name: 'secondaryColor',
            label: '辅助色',
            type: 'color',
            defaultValue: '#36CFC9'
          },
          {
            name: 'bgColor',
            label: '背景色',
            type: 'color',
            defaultValue: '#ffffff'
          }
        ]
      },
      {
        title: '数据源配置',
        fields: [
          {
            name: 'dataSourceType',
            label: '数据源类型',
            type: 'select',
            options: [
              { label: '静态数据', value: 'static' },
              { label: 'API', value: 'api' },
              { label: 'JSON', value: 'json' }
            ],
            defaultValue: 'static'
          },
          {
            name: 'dataSourceUrl',
            label: '数据源URL',
            type: 'text',
            description: 'API或JSON文件的地址',
            defaultValue: ''
          },
          {
            name: 'autoLoad',
            label: '自动加载',
            type: 'boolean',
            defaultValue: true
          }
        ]
      },
      {
        title: '布局配置',
        fields: [
          {
            name: 'columnLayout',
            label: '列布局',
            type: 'select',
            options: [
              { label: '1列', value: '1' },
              { label: '2列', value: '2' },
              { label: '4列', value: '4' },
              { label: '自动适应', value: 'auto' }
            ],
            defaultValue: 'auto'
          },
          {
            name: 'cardRadius',
            label: '卡片圆角',
            type: 'number',
            min: 0,
            max: 20,
            defaultValue: 8
          }
        ]
      },
      {
        title: '内容配置',
        fields: [
          {
            name: 'showPhone',
            label: '显示电话咨询',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'showOnline',
            label: '显示在线客服',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'showEmail',
            label: '显示邮件联系',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'showAddress',
            label: '显示来访洽谈',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'phoneNumber',
            label: '电话号码',
            type: 'text',
            defaultValue: '400-888-9999'
          },
          {
            name: 'emailAddress',
            label: '邮箱地址',
            type: 'text',
            defaultValue: 'support@zhilian-tech.com'
          }
        ]
      }
    ],
    
    events: [
      {
        name: 'cardClick',
        label: '联系卡片点击',
        description: '点击联系信息卡片时触发',
        parameters: [
          { name: 'contact', type: 'object', description: '联系信息对象' }
        ]
      },
      {
        name: 'linkClick',
        label: '联系链接点击',
        description: '点击联系链接时触发',
        parameters: [
          { name: 'contact', type: 'object', description: '联系信息对象' }
        ]
      },
      {
        name: 'dataLoaded',
        label: '数据加载完成',
        description: '从外部数据源加载联系信息数据完成时触发',
        parameters: [
          { name: 'contacts', type: 'array', description: '加载的联系信息数据' }
        ]
      },
      {
        name: 'dataLoadError',
        label: '数据加载失败',
        description: '从外部数据源加载联系信息数据失败时触发',
        parameters: [
          { name: 'error', type: 'object', description: '错误信息' }
        ]
      }
    ],
    
    actions: [
      {
        name: 'updateContacts',
        label: '更新联系信息',
        description: '更新联系信息卡片数据',
        parameters: [
          { name: 'contacts', type: 'array', required: true, description: '联系信息数组' }
        ]
      }
    ]
  },
  
  props: {
    // 颜色配置
    primaryColor: {
      type: String,
      default: '#165DFF'
    },
    secondaryColor: {
      type: String,
      default: '#36CFC9'
    },
    bgColor: {
      type: String,
      default: '#ffffff'
    },
    

    children: {
      type: Array,
      default: () => []
    },

    // 数据源配置
    dataSourceType: {
      type: String,
      default: 'static',
      validator: value => ['static', 'api', 'json'].includes(value)
    },
    dataSourceUrl: {
      type: String,
      default: ''
    },
    autoLoad: {
      type: Boolean,
      default: true
    },
    
    // 布局配置
    columnLayout: {
      type: String,
      default: 'auto',
      validator: (value) => ['1', '2', '4', 'auto'].includes(value)
    },
    cardRadius: {
      type: Number,
      default: 8,
      validator: (value) => value >= 0 && value <= 20
    },
    
    // 内容显示配置
    showPhone: {
      type: Boolean,
      default: true
    },
    showOnline: {
      type: Boolean,
      default: true
    },
    showEmail: {
      type: Boolean,
      default: true
    },
    showAddress: {
      type: Boolean,
      default: true
    },
    
    // 联系信息
    phoneNumber: {
      type: String,
      default: '400-888-9999'
    },
    emailAddress: {
      type: String,
      default: 'support@zhilian-tech.com'
    },
    
    // 联系卡片数据
    contacts: {
      type: Array,
      default: () => [
        {
          id: 'phone',
          icon: 'fa-phone',
          title: '电话咨询',
          description: '工作日 9:00-18:00<br>节假日 10:00-16:00',
          linkText: '400-888-9999',
          link: 'tel:400-888-9999',
          highlightLink: true,
          bgColor: '#165DFF'
        },
        {
          id: 'online',
          icon: 'fa-comments',
          title: '在线客服',
          description: '工作日 9:00-21:00<br>节假日 10:00-18:00',
          linkText: '立即咨询',
          link: '#online-chat',
          highlightLink: false,
          bgColor: '#36CFC9'
        },
        {
          id: 'email',
          icon: 'fa-envelope',
          title: '邮件联系',
          description: '我们将在24小时内<br>回复您的邮件',
          linkText: 'support@zhilian-tech.com',
          link: 'mailto:support@zhilian-tech.com',
          highlightLink: false,
          bgColor: '#722ED1'
        },
        {
          id: 'address',
          icon: 'fa-map-marker',
          title: '来访洽谈',
          description: '请提前预约<br>我们将安排专业顾问接待',
          linkText: '预约拜访',
          link: '#appointment',
          highlightLink: false,
          bgColor: '#F5222D'
        }
      ]
    },
    

  },
  
  data() {
    return {
      // 加载状态
      isLoading: false,
      
      // 原始数据备份（用于数据源切换时恢复）
      originalContacts: []
    };
  },
  
  mounted() {
    // 保存原始数据，用于恢复
    this.originalContacts = JSON.parse(JSON.stringify(this.contacts));
    
    // 自动加载数据
    if (this.dataSourceType !== 'static' && this.autoLoad && this.dataSourceUrl) {
      this.loadDataFromSource();
    }
  },
  
  watch: {
    // 当contacts数据变化时，同步更新原始数据备份
    contacts: {
      handler(newVal) {
        this.originalContacts = JSON.parse(JSON.stringify(newVal));
      },
      deep: true,
      immediate: true
    },
    
    // 当数据源类型变化时，重新加载数据
    dataSourceType(newType) {
      if (newType === 'static') {
        this.restoreOriginalData();
      } else if (this.autoLoad && this.dataSourceUrl) {
        this.loadDataFromSource();
      }
    },
    
    // 当数据源URL变化时，重新加载数据
    dataSourceUrl(newUrl) {
      if (this.dataSourceType !== 'static' && this.autoLoad && newUrl) {
        this.loadDataFromSource();
      }
    }
  },
  
  computed: {
    // 网格布局类名
    gridClass() {
      switch (this.columnLayout) {
        case '1':
          return 'grid grid-cols-1 gap-8 max-w-2xl mx-auto';
        case '2':
          return 'grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto';
        case '4':
          return 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto';
        default: // auto
          return 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto';
      }
    }
  },
  
  methods: {
    /**
     * 从数据源加载数据
     */
    async loadDataFromSource() {
      if (!this.dataSourceUrl) {
        this.$emit('dataLoadError', { message: '数据源URL不能为空' });
        return;
      }

      this.isLoading = true;
      
      try {
        const response = await fetch(this.dataSourceUrl, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json'
          }
        });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        
        // 验证数据格式
        if (!Array.isArray(data)) {
          throw new Error('数据格式错误：返回的不是数组');
        }

        // 使用对象展开运算符创建新对象，确保响应式
        this.$props.contacts = [...data];
        
        this.$emit('dataLoaded', data);
      } catch (error) {
        console.error('加载联系信息数据失败:', error);
        this.$emit('dataLoadError', error);
      } finally {
        this.isLoading = false;
      }
    },
    
    /**
     * 刷新数据
     */
    refresh() {
      if (this.dataSourceType !== 'static' && this.dataSourceUrl) {
        this.loadDataFromSource();
      }
    },
    
    /**
     * 恢复原始数据
     */
    restoreOriginalData() {
      this.$props.contacts = JSON.parse(JSON.stringify(this.originalContacts));
    },
    
    /**
     * 获取联系图标背景样式
     */
    getContactIconBgStyle(contact) {
      // 支持联系项自定义颜色，否则使用主题色
      const bgColor = contact.bgColor 
        ? `${contact.bgColor}20`  // 20%透明度
        : `${this.primaryColor}20`;
        
      return {
        backgroundColor: bgColor
      };
    },
    
    /**
     * 处理卡片点击事件
     */
    handleCardClick(contact) {
      this.$emit('cardClick', contact);
    },
    
    /**
     * 处理链接点击事件
     */
    handleLinkClick(contact, e) {
      this.$emit('linkClick', contact);
      
      // 对于电话和邮件链接，使用默认行为
      if (contact.link.startsWith('tel:') || contact.link.startsWith('mailto:')) {
        return true;
      }
      
      // 对于其他链接，阻止默认行为，让父组件处理
      e.preventDefault();
      return false;
    },
    
    /**
     * 更新联系信息
     */
    updateContacts(contacts) {
      if (Array.isArray(contacts)) {
        this.contacts = contacts;
      }
    },
    

  }
};
</script>

<style scoped>
/* 已替换为Tailwind CSS样式 */
</style>
    